<template>
  <div class="carousel-line-container">
    <!--  -->
    <a-carousel
      :dot-position="dotPosition"
      :dots="true"
      :afterChange="afterChange"
      :beforeChange="beforeChange"
      autoplay
    >
      <div
        class="line-item"
        v-for="(item, index) in peojectLineParams"
        :key="index"
      >
        <div class="line-item-body">
          <div class="line-header">
            <div class="project-name">
              {{ item.proName }}
            </div>
            <div class="legend-container">
              <div class="legend-item">延期完成</div>
              <div class="legend-item">提前完成</div>
            </div>
          </div>
          <div class="line-body">
            <div
              class="prev"
              @click="prev()"
              :class="[item.lineData.length <= 1 && 'disable']"
            ></div>
            <div
              class="next"
              @click="next()"
              :class="[item.lineData.length <= 1 && 'disable']"
            ></div>
            <div class="schedule-name">实际进度</div>
            <div
              class="plan-date"
              :class="[checkLengthClass(item.lineData[mileageIndex])]"
            >
              <div
                v-for="(v, i) in item.lineData[mileageIndex]"
                :key="i"
                class="plan-item"
              >
                <div
                  class="plan-label"
                  :class="[!v.actualCompletion && 'not-date']"
                >
                  <template
                    v-if="v.statusDesc == '超期' || v.statusDesc == '提前'"
                  >
                    <a-tooltip
                      placement="top"
                      :getPopupContainer="() => $el"
                      :overlayClassName="checkTipClass(v.statusDesc)"
                      :destroyTooltipOnHide="true"
                    >
                      <template slot="title">
                        <span v-if="v.statusDesc == '正常'">按时完成</span>
                        <span v-else>
                          {{ v.statusDesc }}
                          <template v-if="v.statusDesc != '未开始'">
                            {{ v.deviation }}天完成
                          </template>
                        </span>
                      </template>
                      {{ v.actualCompletion || "-" }}
                    </a-tooltip>
                  </template>
                  <template v-else>
                    {{ v.actualCompletion || "-" }}
                  </template>
                </div>
                <div class="plan-icon" :class="[checkStateClass(v.statusDesc)]">
                  <div class="line" v-if="countNumber > 1"></div>
                </div>
              </div>
            </div>
            <div class="names">
              <div
                class="plan-item"
                v-for="(v, i) in item.lineData[mileageIndex]"
                :key="i"
              >
                <div class="plan-label">
                  {{ v.name || "-" }}
                </div>
              </div>
            </div>
            <div class="plan-name">计划进度</div>
            <div
              class="plan-reality"
              :class="[checkLengthClass(item.lineData[mileageIndex])]"
            >
              <div
                class="plan-item"
                v-for="(v, i) in item.lineData[mileageIndex]"
                :key="i"
              >
                <div class="plan-icon">
                  <div class="line" v-if="countNumber > 1"></div>
                </div>
                <div
                  class="plan-label"
                  :class="[!v.planComplete && 'not-date']"
                >
                  {{ v.planComplete || "-" }}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </a-carousel>
  </div>
</template>

<script>
export default {
  props: {
    dataSoucre: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },

  data() {
    return {
      dotPosition: "left",
      peojectLineParams: [],
      current: 0,
      mileageIndex: 0,
      defaultVisible: false,
    };
  },
  computed: {
    countNumber() {
      let { current, peojectLineParams, mileageIndex } = this;
      let number = peojectLineParams[current].lineData[mileageIndex].length;
      return number;
    },
  },
  watch: {
    dataSoucre: {
      handler(val) {
        if (val) {
          this.peojectLineParams = this.dataSoucre;
          this.peojectLineParams.forEach((v) => {
            v.lineData = this.filterNum(v.scheduleList, 7);
          });
        }
      },
      immediate: true,
    },
  },
  methods: {
    getPopupContainer() {
      return document.getElementById("plan-tip");
    },
    afterChange(current) {
      this.current = current;
      this.mileageIndex = 0;
    },
    beforeChange(from, to) {
      this.current = to;
      this.mileageIndex = 0;
    },
    //上一页
    prev() {
      let { current, peojectLineParams } = this;
      if (this.mileageIndex > 0) {
        this.mileageIndex--;
      } else {
        this.mileageIndex =
          peojectLineParams[current].lineData[this.mileageIndex].length - 1;
      }
    },
    //下一页
    next() {
      let { current, peojectLineParams } = this;
      if (
        this.mileageIndex <
        peojectLineParams[current].lineData[this.mileageIndex].length - 1
      ) {
        this.mileageIndex++;
      } else {
        this.mileageIndex = 0;
      }
    },

    //数组分割
    filterNum(arr = [], number) {
      let newArr = [];
      for (let i = 0; i < arr.length; ) {
        newArr.push(arr.slice(i, (i += number)));
      }
      return newArr;
    },

    checkStateClass(state) {
      switch (state) {
        case "提前":
          return "success";

        case "超期":
          return "error";

        case "正常":
          return "default";

        case "进行中":
          return "ing";

        default:
          return "not-start";
      }
    },

    checkTipClass(state) {
      switch (state) {
        case "提前":
          return "success-tip";

        case "超期":
          return "error-tip";

        default:
          return "";
      }
    },

    checkLengthClass(data = []) {
      let num = data.length;
      switch (num) {
        case 2:
          return "two-line";
        case 4:
          return "four-line";
        case 5:
          return "five-line";
        case 6:
          return "six-line";
        case 7:
          return "seven-line";

        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.carousel-line-container {
  overflow: hidden;
  height: 218px;
  /deep/.ant-carousel {
    .slick-dots {
      display: none;
    }
    .line-item {
      height: 214px;
      overflow: hidden;
      .line-item-body {
        height: 100%;
        width: 100%;
        position: relative;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        .line-header {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 10px 16px 0 16px;
          box-sizing: border-box;
          .project-name {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #11ffb4;
            display: flex;
            align-items: center;
            &::before {
              content: "";
              width: 32px;
              height: 34px;
              background: url("./images/icon_18.png");
              background-size: 100% 100%;
              display: inline-block;
              margin-right: 4px;
            }
          }
          .legend-container {
            display: flex;
            align-items: center;
            .legend-item {
              margin-right: 40px;
              font-family: Microsoft YaHei;
              font-weight: 400;
              font-size: 14px;
              color: rgba(184, 243, 255, 0.8);
              position: relative;
              padding-left: 30px;
              &:last-of-type {
                margin-right: 0;
              }
              &::before {
                content: "";
                width: 20px;
                height: 2px;
                background: #ff7777;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 0;
              }
              &::after {
                content: "";
                width: 10px;
                height: 10px;
                background: #fffae2;
                border-radius: 50%;
                border: 2px solid #ff7777;
                position: absolute;
                top: 50%;
                transform: translateY(-50%);
                left: 5px;
              }
              &:nth-child(2) {
                &::before {
                  background: #55e273;
                }
                &::after {
                  border: 2px solid #55e273;
                }
              }
            }
          }
        }
        .line-body {
          flex: 1;
          padding: 0 60px;
          box-sizing: border-box;
          position: relative;
          overflow: hidden;
          .prev {
            z-index: 99;
            cursor: pointer;
            position: absolute;
            left: 40px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 24px;
            background: url("./images/icon_24.png");
            background-size: 100% 100%;
            opacity: 1;
          }
          .next {
            z-index: 99;
            cursor: pointer;
            position: absolute;
            right: 40px;
            top: 50%;
            transform: translateY(-50%);
            width: 16px;
            height: 24px;
            background: url("./images/icon_23.png");
            background-size: 100% 100%;
            opacity: 1;
          }
          .disable {
            opacity: 0;
            pointer-events: none;
          }
          .schedule-name {
            position: absolute;
            top: 0;
            left: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #eef9ff;
          }
          .plan-name {
            position: absolute;
            bottom: 20px;
            left: 26px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #f7f753;
          }

          .plan-date,
          .names,
          .plan-reality {
            display: flex;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 12px;
            color: #f7f753;
            .plan-item {
              flex: 1;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;
              position: relative;
              .plan-icon {
                margin-top: 10px;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 30px;
                height: 30px;
                background: url("./images/icon_20.png");
                background-size: 100% 100%;
                &::before {
                  content: "";
                  width: 45%;
                  height: 2px;
                  background: #ffd71e;
                  position: absolute;
                  left: 0;
                }
                &::after {
                  content: "";
                  width: 45%;
                  height: 2px;
                  background: #ffd71e;
                  position: absolute;
                  right: 0;
                }
                .line {
                  position: absolute;
                  width: 100%;
                  &::before {
                    position: absolute;
                    top: -5px;
                    left: 0;
                    content: "";
                    height: 9px;
                    width: 45%;
                    background: rgba(247, 247, 83, 0.4);
                  }
                  &::after {
                    position: absolute;
                    top: -5px;
                    right: 0;
                    content: "";
                    height: 9px;
                    width: 45%;
                    background: rgba(247, 247, 83, 0.4);
                  }
                }
              }
              &:first-of-type {
                .plan-icon {
                  &::before {
                    display: none;
                  }
                  .line {
                    &::before {
                      display: none;
                    }
                  }
                }
              }
              &:last-of-type {
                .plan-icon {
                  &::after {
                    display: none;
                  }
                  .line {
                    &::after {
                      display: none;
                    }
                  }
                }
              }
              .plan-label {
                padding-top: 8px;
              }
            }
          }
          .names {
            color: #8fdbfc;
          }
          .plan-date {
            .plan-item {
              .plan-icon {
                margin-top: 0;
                &::before {
                  width: 45%;
                  background: #00d5ff;
                }
                &::after {
                  width: 45%;
                  background: #00d5ff;
                }
                .line {
                  position: absolute;
                  width: 100%;
                  &::before {
                    position: absolute;
                    top: -5px;
                    left: 0;
                    content: "";
                    height: 9px;
                    width: 45%;
                    background: rgba(0, 255, 255, 0.4);
                  }
                  &::after {
                    position: absolute;
                    top: -5px;
                    right: 0;
                    content: "";
                    height: 9px;
                    width: 45%;
                    background: rgba(0, 255, 255, 0.4);
                  }
                }
                //
                &.not-date {
                  height: 20px;
                  width: 20px;
                  background: url("./images/icon_22.png");
                  background-size: 100% 100%;
                  &::before {
                    width: 45%;
                    background: rgba(255, 255, 255, 0.2);
                  }
                  &::after {
                    width: 45%;
                    background: rgba(255, 255, 255, 0.2);
                  }
                  .line {
                    display: none;
                  }
                }
              }
              .plan-label {
                color: #eef9ff;
                font-size: 14px;
                padding-top: 0;
                padding-bottom: 8px;
                &.not-date {
                  color: rgba(0, 0, 0, 0);
                }
              }

              .default {
                background: url("./images/icon_26.png");
                background-size: 100% 100%;
              }
              .error {
                background: url("./images/icon_19.png");
                background-size: 100% 100%;
              }
              .success {
                background: url("./images/icon_21.png");
                background-size: 100% 100%;
              }
              .ing {
                background: url("./images/icon_27.png");
                background-size: 100% 100%;
              }
              .not-start {
                width: 20px;
                height: 20px;
                background: url("./images/icon_22.png");
                background-size: 100% 100%;
              }
            }
          }
          .two-line {
            .plan-item {
              .plan-icon {
                &::before {
                  width: 46%;
                }
                &::after {
                  width: 46%;
                }
                .line {
                  &::before {
                    width: 46%;
                  }
                  &::after {
                    width: 46%;
                  }
                }
              }
            }
          }
          .four-line {
            .plan-item {
              .plan-icon {
                &::before {
                  width: 43%;
                }
                &::after {
                  width: 43%;
                }
                .line {
                  &::before {
                    width: 43%;
                  }
                  &::after {
                    width: 43%;
                  }
                }
              }
            }
          }
          .five-line {
            .plan-item {
              .plan-icon {
                &::before {
                  width: 41%;
                }
                &::after {
                  width: 41%;
                }
                .line {
                  &::before {
                    width: 41%;
                  }
                  &::after {
                    width: 41%;
                  }
                }
              }
            }
          }
          .six-line {
            .plan-item {
              .plan-icon {
                &::before {
                  width: 40%;
                }
                &::after {
                  width: 40%;
                }
                .line {
                  &::before {
                    width: 40%;
                  }
                  &::after {
                    width: 40%;
                  }
                }
              }
            }
          }
          .seven-line {
            .plan-item {
              .plan-icon {
                &::before {
                  width: 39%;
                }
                &::after {
                  width: 39%;
                }
                .line {
                  &::before {
                    width: 39%;
                  }
                  &::after {
                    width: 39%;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
@media (min-height: 920px) {
  .carousel-line-container {
    height: 240px;
    /deep/.ant-carousel {
      .line-item {
        height: 236px;
        .line-item-body {
          .line-body {
            .plan-date,
            .names,
            .plan-reality {
              .plan-item {
                .plan-label {
                  padding-top: 16px;
                }
              }
            }
            .plan-name {
              bottom: 8px;
            }
          }
        }
      }
    }
  }
}

/deep/.ant-tooltip {
  .ant-tooltip-content {
    .ant-tooltip-inner {
      color: #eef9ff;
    }
  }
}
/deep/.error-tip {
  .ant-tooltip-content {
    .ant-tooltip-inner {
      background: #e25252;
    }
    .ant-tooltip-arrow {
      &::before {
        background: #e25252;
      }
    }
  }
}
/deep/.success-tip {
  .ant-tooltip-content {
    .ant-tooltip-inner {
      background: #32b24d;
    }
    .ant-tooltip-arrow {
      &::before {
        background: #32b24d;
      }
    }
  }
}
</style>
